<%@page import="DTO.Paciente"%>
<%@page import="Model.conexionBD"%>
<%@page import="DTO.Administrador"%>
<%@page contentType="text/html" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <% //http://www.cristalab.com/tutoriales/crear-un-slider-con-efectos-en-javascript-c105085l/
        //Obtiener la sesion
        HttpSession sesion = request.getSession();
        Administrador admin = (Administrador) session.getAttribute("Administrador");
        String miValor = "";
        //if(request.getParameter("id")!=null) 
        miValor = request.getParameter("id");

        conexionBD c = new conexionBD("root", "root", "SAPCOMED_DATABASE");
        Paciente pac = c.obtenerPaciente(Integer.parseInt(miValor));

        //Valida el usuario  admin != null
        if (admin != null) {%>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />       
        <title> Menú Principal | Ficha clínica</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="css/menu.css" media="screen" />
        <link rel="shortcut icon" href="img/sign.ico"  type="image/x-icon"   />
        
        <!-- css y js para el formulario -->
        <link rel="stylesheet" type="text/css" href="css/structure.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="css/form.css" media="screen"/>  
        <script src="js/seleccion.js"></script>

        <!-- css y js para validación -->
        <script type="text/javascript" src="js/js_common.js"></script>
        <link rel="stylesheet" type="text/css" href="css/styleValidationEngine.css" media="screen" />
        <script type="text/javascript" src="jquery/jquery-1.8.2.min.js" charset="utf-8"></script>
        <script type="text/javascript" src="jquery/jquery.validationEngine-es.js" charset="utf-8"></script>
        <script type="text/javascript" src="jquery/jquery.validationEngine.js" charset="utf-8" ></script> 
        <script type="text/javascript" src="jquery/jquery.blockUI.js" charset="utf-8" ></script>
        
         

        <script type="text/javascript" >
            jQuery(document).ready(function(){
                jQuery("#registro_paciente").validationEngine();
            });
            
            function activa(valor)
            {
                if(valor == "mTelefono"){
                    document.HojaDatosPaciente.telefono.disabled=false;
                    document.HojaDatosPaciente.nuevoTel.disabled=false;
                }else if(valor == "mOcupacion"){
                    document.HojaDatosPaciente.ocupacion.disabled=false;
                    document.HojaDatosPaciente.nuevaOcup.disabled=false;
                }else if(valor == "mCorreo"){
                    document.HojaDatosPaciente.correo.disabled=false;
                    document.HojaDatosPaciente.nuevoCorreo.disabled=false;
                }
                
            }
            
            var extension; 
            var mime;
            var ajax;
            
            function split(valor){
                var ext = valor.split(".");
                extension = ext[1];   
            }
            function content(valor){
                var ext = valor.split(".");
                extension = ext[1];   
                switch (extension) {
                    case 'gif':
                        mime="image/gif"; 
                        break;
                    case 'jpg':
                        mime="image/jpeg"; 
                        break;
                    case 'png':
                        mime="image/png"; 
                        break;
                    case 'jpe':
                        mime="image/jpeg"; 
                        break;
                    default:
                        mime="image/gif"; 
                }

            }
            
            //-------------------------------------------------------------------------    
 
   

            //---------------------------------

            function funcionCallback()
            {
                // Comprobamos si la peticion se ha completado (estado 4)
                if( ajax.readyState == 4 )
                {
                    // Comprobamos si la respuesta ha sido correcta (resultado HTTP 200)
                    if( ajax.status == 200 )
                    {
                        // Escribimos el resultado en la pagina HTML mediante DHTML
                                    
                        //document.getElementById("mensaje").style.visibility="visible"; 
                         jQuery(document).ready(function() { 
                        jQuery.growlUI('Notificación', ajax.responseText);
                      });
                      
                                    
                    }
                }
            }
            function actualizar(valor1,valor2)
            {
                // Creamos el control XMLHttpRequest segun el navegador en el que estemos 
                if( window.XMLHttpRequest )
                    ajax = new XMLHttpRequest(); // No Internet Explorer
                else
                    ajax = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer

                // Almacenamos en el control al funcion que se invocara cuando la peticion
                // cambie de estado	
                ajax.onreadystatechange = funcionCallback;
                //archivo();
                // Enviamos la peticion
                      
                if(valor2 == "telefono"){
                    ajax.open("POST", "ServicioActualizarPaciente?cedula="+valor1+"&dato="+valor2+"&nuevoDato="+document.HojaDatosPaciente.telefono.value, true );
                    if(document.HojaDatosPaciente.telefono.value != null){
                        document.HojaDatosPaciente.telefono.disabled=true;
                        document.HojaDatosPaciente.nuevoTel.disabled=true;
                        document.HojaDatosPaciente.cTel.checked=false;
                    }
                }else if(valor2 == "ocupacion"){
                    ajax.open("POST", "ServicioActualizarPaciente?cedula="+valor1+"&dato="+valor2+"&nuevoDato="+document.HojaDatosPaciente.ocupacion.value, true );
                    if(document.HojaDatosPaciente.ocupacion.value != null){
                        document.HojaDatosPaciente.ocupacion.disabled=true;
                        document.HojaDatosPaciente.nuevaOcup.disabled=true;
                        document.HojaDatosPaciente.cOcup.checked=false;}
                }else if(valor2 == "correo"){
                    ajax.open("POST", "ServicioActualizarPaciente?cedula="+valor1+"&dato="+valor2+"&nuevoDato="+document.HojaDatosPaciente.correo.value, true );
                    if(document.HojaDatosPaciente.correo.value != null){
                        document.HojaDatosPaciente.correo.disabled=true;
                        document.HojaDatosPaciente.nuevoCorreo.disabled=true;
                        document.HojaDatosPaciente.cCorreo.checked=false;}
                }
                ajax.send( "" );
                        
            }
            
        </script>
         <style>
          div.growlUI { background: url(img/uncheck.png) no-repeat 10px 10px;}
        </style>
    </head>

    <body>
        <div id="wrap">
            <div id="top">
                <h2>Información ficha clínica</h2>
                <div style="margin-left: 40%;margin-bottom: 3.6%;"> <h1>Usuario:  <%= admin.getNombre()%> </h1> </div>
               <a href="javascript:cerrar_sesion()">Cerrar sesión</a>
            </div>
            <div style="color: #ffffff; margin-left:2%; font-size: 1.6em;">
                <script type="text/javascript">
                    document.write(Muestrafecha()); 
                </script>
            </div>
            <div id="content">
                <div id="container" >
                    <form id="HojaDatosPaciente" name="HojaDatosPaciente" action="/SAPCOMED/InsertarPaciente" method="post"  enctype=?multipart/form-data" class="wufoo topLabel page formato_letra">   
                        <div class="info formato_letra" >
                            <h2 info formato_letra>Vista de datos del paciente</h2>
                        </div>
                        <ul>
                            <div style="position:absolute;float:right; margin-left: 60%;">
                                <% if (!c.obtenerFoto(pac.getId_Paciente())) {%>
                                <img src="img/user.png" name="fotoPaciente" width="200" height="200" align="middle" style="border:2px dashed #000;" onclick="window.location.href='SubirFoto.jsp?cedula='+'<%= pac.getId_Paciente()%>'"/>
                                <%} else {%>
                                <img src="ServicioFoto?cedula=<%= pac.getId_Paciente()%>" name="fotoPaciente" width="200" height="200"
                                     align="middle" style="border:2px dashed #000;" onclick="window.location.href='SubirFoto.jsp?cedula='+'<%= pac.getId_Paciente()%>'" alt="Cambiar foto"/>
                                <%}%>
                                <input class="button" type="button" name="nuevaFoto" style="margin-left: 19%;"value="Actualizar foto" onclick="window.location.href='SubirFoto.jsp?cedula='+'<%= pac.getId_Paciente()%>'"/>
                            </div>
                            <div>
                                <li id="" class="notranslate formato_letra">
                                    <label class="desc" id="" for="">
                                        Nombre del paciente:
                                    </label>
                                    <span>
                                    <input type="text" id="nombre" size="30" class="field text fn" value="<%= pac.getNombre()%> <%= pac.getPrimerApellido()%> <%= pac.getSegundoApellido()%>" disabled/>
                                    </span>
                                </li>
                            </div>
                            <div>
                                <li id="" class="notranslate formato_letra">
                                    <label class="desc" id="" for="">
                                        Cédula
                                    </label>
                                    <input type="text" id="cedula" name="cedula" size="30" class="field text fn" value="<%= pac.getId_Paciente()%>" disabled/>
                                </li>
                            </div>
                            <div>
                                <li id="" class="notranslate formato_letra">
                                    <label class="desc" id="" for="">
                                        Fecha de nacimiento:
                                    </label>
                                    <input type="text" id="fechaN" size="30" class="field text fn" value="<%= pac.getFechaNacimiento()%>" disabled/>
                                </li>
                            </div>
                            <div>
                                <li id="" class="notranslate formato_letra" style="width: 20%;">
                                    <label class="desc" id="" for="">
                                        Edad:
                                    </label> 
                                    <input type="text" id="entrada" size="30" class="field text fn" value="<%
                                        int edad = c.obtenerEdadPac(pac.getId_Paciente());%><%= edad%>" disabled/>
                                </li>
                            </div>

                            <div>
                                <li id="" class="notranslate formato_letra">
                                     <label class="desc" id="" for="">
                                        Género:
                                    </label>
                                           <input type="text" id="entrada" class="field text fn" size="30" value="<%
                                          if (pac.getGenero().startsWith("M")) {%> Masculino
                                           <%      } else {%>Femenino <%}%>" disabled/>
                                </li>
                            </div>
                            <div>
                                <li id="" class="notranslate formato_letra">
                                    <label class="desc" id="" for="">
                                        Dirección:
                                    </label>
                                    <input type="text" id="dirección" size="30" class="field text fn" value="<%= pac.getDireccion()%>" disabled/>
                                </li>
                            </div>
                            <div>   
                                <li id="" class="notranslate formato_letra">
                                     <label class="desc" id="" for="">
                                        Teléfono:
                                    </label>
                                    <input type="text" id="telefono" name="telefono" class="field text fn" size="30" value="<%= pac.getTelefono()%>" disabled/>
                                    <input type="button" name="nuevoTel" value="Enviar" onclick="actualizar('<%= pac.getId_Paciente()%>','telefono')" disabled/>
                                    <input type="radio" name="cTel" value="Modificar"  onclick="activa('mTelefono')"/> 
                                </li>
                            </div>
                            <div>
                                <li id="" name="ocup" class="notranslate formato_letra">
                                     <label class="desc" id="" for="">
                                       Ocupación:
                                    </label> 
                                    <input type="text" id="ocupacion" name="ocupacion" size="30" class="field text fn" value="<%= pac.getOcupacion()%>" disabled/> 
                                    <input type="button" name="nuevaOcup" value="Enviar" onclick="actualizar('<%= pac.getId_Paciente()%>','ocupacion')" disabled/>
                                    <input type="radio" value="Modificar" name="cOcup"   onclick="activa('mOcupacion')"/>
                                </li>
                            </div>
                            <div>
                                <li id="" name="ocup" class="notranslate formato_letra">
                                    <label class="desc" id="" for="">
                                      Email:
                                    </label>  
                                    <input type="text" id="correo" name="correo" size="30" class="field text fn" value="<%= pac.getCorreo()%>" disabled/> 
                                 <input type="button" name="nuevoCorreo" value="Enviar"  onclick="actualizar('<%= pac.getId_Paciente()%>','correo')" disabled/>
                                 <input type="radio" value="Modificar" name="cCorreo"  onclick="activa('mCorreo')"/>
                                </li>
                                
                            </div>
                                    
                                    
                             <!--<div >
                               <input type="text" id="mensaje" name="mensaje" 
                                       style="border:1px solid #D8000C;height:20px;width:678px;
                                       padding:4px 0px 0px 20px;
                                       background-color:#FFBABA;
                                       font-weight: bold;
                                       color: #D8000C;
                                       text-align: center;
                                       font-size: 1.1em;
                                       margin:10px 0px 0px 0px;visibility: hidden;"/>  
                            </div>-->
                        </ul>
                                 <br> <br><br> 
                               <div style="float:left; margin-left: 65%; margin-top: -40px;">

                                    <input id="b_atras" name="b_atras" class="button" 
                                           type="button" value="Atras" onclick="document.location='/SAPCOMED/Busqueda_Paciente.jsp'" />
                                </div>     
                                <div style="float:left; margin-top: -40px; margin-left: 3%;">

                                    <input id="b_MP" name="b_MP" class="button" 
                                           type="button" value="Menú principal" onclick="document.location='/SAPCOMED/MenDDs.jsp'" />
                                </div>
                    </form>
                </div>
            </div> 
        </div>  
        <div id="footer">
            <footer>
                <div><img src="img/footer_img.png" height="39" width="960" border="0"></div>
                <h4>
                    <a href="MapaSitio.jsp">MAPA DEL SITIO</a> | 
                    <a href="Desarrolladores.jsp" accesskey="H" onClick="popup = window.open('Desarrolladores.jsp', 'PopupPage','height=550,width=600,scrollbars=yes,resizable=no'); return false" target="_blank" onMouseOver="window.status='';  return true" onMouseOut="window.status=''; return true"onFocus="window.status='';  return true" onBlur="window.status=''; return true"  class="submenulinktext2">DESAROLLADORES</a> |  
                    <a href="Ayuda.jsp" accesskey="H" onClick="popup = window.open('Ayuda.jsp', 'PopupPage','height=550,width=600,scrollbars=yes,resizable=no'); return false" target="_blank" onMouseOver="window.status='';  return true" onMouseOut="window.status=''; return true"onFocus="window.status='';  return true" onBlur="window.status=''; return true"  class="submenulinktext2">AYUDA</a>
                </h4>
                <div class="ftext"> Tel:(506) 2246-3279 <br/> sapcomed &copy;  Todos los derechos reservados. Prohibida la reproducción total o parcial.</div>
            </footer>
        </div>
    </body>
    <% }%>
</html>